<template>
  <div class="content-shape-blocks">
    <div class="block">
      <img src="@/assets/img/overview/3-1.png" alt="3-1" />
      <div class="font">
        <span>{{ "综合人口库" }}</span>
        <span>{{ (v1/10000).toFixed(2) + '万' }}</span>
      </div>
    </div>
    <div class="block">
      <img src="@/assets/img/overview/3-2.png" alt="3-2" />
      <div class="font">
        <span>{{ "综合法人库" }}</span>
        <span>{{ (v2/10000).toFixed(2) + '万' }}</span>
      </div>
    </div>
    <div class="block">
      <img src="@/assets/img/overview/3-3.png" alt="3-3" />
      <div class="font">
        <span>{{ "信用信息库" }}</span>
        <span>{{ (v3/100000000).toFixed(2) + '亿' }}</span>
      </div>
    </div>
    <div class="block">
      <img src="@/assets/img/overview/3-4.png" alt="3-4" />
      <div class="font">
        <span>{{ "电子证照库" }}</span>
        <span>{{ (v4/10000).toFixed(2) + '万' }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import API from "@/api/overview";

export default {
  name: "o3-box",
  data() {
    return {
      timer: null,
      v1: 100,
      v2: 234,
      v3: 334,
      v4: 2334,
    };
  },
  methods: {
    getBoxData() {
      let handleV1 = (res) => (this.v1 = res.data.body.data[0].sl);
      let handleV2 = (res) => (this.v2 = res.data.body.data[0].sl);
      let handleV3 = (res) =>
        (this.v3 = JSON.parse(
          res.data.resultContent
        ).dataNationalPoolingAmounts.dataNationalPoolAmounts);
      let handleV4 = (res) =>
        (this.v4 = JSON.parse(res.data.resultContent).CenterView.photo.value);
      API.getBox3_v1().then(handleV1);
      API.getBox3_v2().then(handleV2);
      API.getBox3_v3().then(handleV3);
      API.getBox3_v4().then(handleV4);
    },
    getTask() {
      return () => {
        this.getBoxData();
      };
    },
  },
  mounted() {
    this.getTask()(); // 先执行 一次任务
    this.timer = setInterval(this.getTask(), 30000); // 设置周期触发任务
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  },
};
</script>

<style lang="less" scoped>
.content-shape-blocks {
  width: 100%;
  height: 220px;
  display: grid;
  grid-gap: 7px;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  .block {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 10px;
    img {
      width: 36px;
      height: 36px;
    }
    .font {
      display: flex;
      font-size: 16px;
      font-family: PingFangSC sans-serif;
      flex-direction: column;
      span:last-child {
        font-size: 20px;
        font-family: ReductoCondensedSSiCondensed sans-serif;
      }
    }
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.12);
    border-radius: 3px;
    &:nth-child(1) {
      background: url("../../../assets/img/overview/4-1bg.png") no-repeat;
      background-size: 100% 100%;
      .font span:last-child {
        color: #3695ff;
      }
    }
    &:nth-child(2) {
      background: url("../../../assets/img/overview/4-2bg.png") no-repeat;
      background-size: 100% 100%;
      .font span:last-child {
        color: #ebad59;
      }
    }
    &:nth-child(3) {
      background: url("../../../assets/img/overview/4-3bg.png") no-repeat;
      background-size: 100% 100%;
      .font span:last-child {
        color: #3dbddd;
      }
    }
    &:nth-child(4) {
      background: url("../../../assets/img/overview/4-4bg.png") no-repeat;
      background-size: 100% 100%;
      .font span:last-child {
        color: #f47676;
      }
    }
  }
}
</style>
